<template>
  <div class='qusetions-choice-container'>
    <div class="app-container">
      <el-card >
        <!-- 头部 -->
        <div class="top">
          <span style="font-size: 12px;color: pink;">说明：目前支持学科和关键字条件筛选</span>
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
        </div>
        <!-- 导航 -->
        <el-form  :model="selectionList" class="demo-form-inline" size="small" label-width="80px" style="margin-top:10px">
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
                <el-form-item label="学科" size="small">
                  <el-select v-model="selectionList.subject"  placeholder="请选择" size="mini" style="width:100%" @change="changeMenuValue">
                    <el-option v-for="item in simpleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="二级目录" size="small" >
                  <el-select v-model="selectionList.menu" placeholder="请选择" size="mini" style="width:100%">>
                    <el-option v-for="item in simpleMenu" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="标签" size="small">
                  <el-select v-model="selectionList.tags" placeholder="请选择" size="mini" style="width:100%">>
                    <el-option v-for="item in tagsMenu" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="关键字" size="small">
                  <el-input v-model="selectionList.keyword" placeholder="根据题干搜索" size="mini"></el-input>
                </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
                <el-form-item label="试题类型" size="small">
                  <el-select v-model="selectionList.questionType" placeholder="请选择" size="mini" style="width:100%">>
                    <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="难度" size="small">
                  <el-select v-model="selectionList.difficulty" placeholder="请选择" size="mini" style="width:100%">>
                    <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="方向" size="small">
                  <el-select v-model="selectionList.direction" placeholder="请选择" size="mini" style="width:100%">
                    <el-option v-for="item in getDirection" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="录入人" size="small">
                  <el-select v-model="selectionList.creatorID" placeholder="请选择" size="mini" style="width:100%">
                    <el-option v-for="item in userCreatorID" :key="item.id" :label="item.username" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
           <el-row type="flex" justify="space-between">
            <el-col :span="6">
                <el-form-item label="题目备注" size="small">
                  <el-input v-model="selectionList.remarks" size="mini"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="企业简称" size="small">
                  <el-input v-model="selectionList.shortNames" size="mini"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="城市" size="small">
                  <el-select v-model="selectionList.province" placeholder="请选择" style="width:49%;margin-right:2%" size="mini" @change="changeCityValue">
                    <el-option v-for="item in provincesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select v-model="selectionList.city" placeholder="请选择"  style="width:49%" size="mini">
                    <el-option v-for="item in CitysList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
            </el-col>
              <el-col :span="6">
                  <el-form-item style="text-align:right">
                    <el-button @click="clearForm" size="small">清除</el-button>
                    <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                  </el-form-item>
            </el-col>
           </el-row>
        </el-form>
        <div class="content">
          <el-tabs v-model="activeName" type="card" @tab-click="getState">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="未通过" name="fourth"></el-tab-pane>
          </el-tabs>
          <el-alert
            :title="`一共${total}条数据`"
            type="info"
            show-icon
            :closable="false">
          </el-alert>
           <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              fixed
              prop="number"
              label="试题编号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="subject"
              label="学科"
              width="120">
            </el-table-column>
            <el-table-column
              prop="catalog"
              label="目录"
              width="120">
            </el-table-column>
            <el-table-column
              prop="questionType"
              label="题型"
              width="120"
              :formatter="GetQuestionType">
            </el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="300">
             <template #default="{row}">
              <div v-html="row.question"></div>
             </template>
            </el-table-column>
            <el-table-column
              prop="addDate"
              label="录入时间"
              width="120">
              <template #default="{row}">
              {{ formatTime(row.addDate) }}
            </template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              label="难度"
              width="120"
              :formatter="GetDifficulty">
            </el-table-column>
            <el-table-column
              prop="creator"
              label="录入人"
              width="120">
            </el-table-column>
            <el-table-column
              prop="chkState"
              label="审核状态"
              width="120"
              :formatter="GetChkState">
            </el-table-column>
            <el-table-column
              prop="chkRemarks"
              label="审核意见"
              width="120">
            </el-table-column>
            <el-table-column
              prop="chkUser"
              label="审核人"
              width="120">
            </el-table-column>
            <el-table-column
              prop="publishState"
              label="发布状态"
              width="120"
              :formatter="GetPublishState">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="220">
              <template #default="{row}">
                <el-button @click="handlePreview(row.id)"  type="text" size="small">预览</el-button>
                <el-button @click="handleOpenDialog(row)"  type="text" size="small" :disabled="row.chkState!==0">审核</el-button>
                <el-button @click="$router.push(`/questions/new?id=${row.id}`)" type="text" size="small" :disabled='row.publishState===1'>修改</el-button>
                <el-button @click="handleOpen(row)" type="text" size="small" >{{row.publishState===1?'下架':'上架'}}
                </el-button>
                <el-button @click="delList(row)" type="text" size="small" :disabled='row.publishState===1'>删除</el-button>
              </template>
            </el-table-column>

          </el-table>
          <div class="pagination" style="text-align:right;margin-top:10px">
             <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formData.page"
              :page-sizes="[2,3,4]"
              :page-size="formData.pagesize"
              layout="prev, pager, next, sizes,jumper"
              :total="total"
              background>
              </el-pagination>
          </div>
        </div>
      </el-card>
      <QuestionsCheck :visible.sync="visible" :checkData="checkData" @updateList="getQuestionsList()"></QuestionsCheck>
      <questionsPro :isShowDialog.sync="isShowDialog" :list="list"></questionsPro>
  </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { choice, remove as questionDel, choicePublish, detail } from '../../api/hmmm/questions'
import { simple } from '../../api/hmmm/subjects'
import { simple as simpleMenu } from '../../api/hmmm/directorys'
import { simple as simpleTags } from '../../api/hmmm/tags'
import { simple as userList } from '../../api/base/users'
import { questionType, difficulty, chkType, publishType, direction } from '../../api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
import QuestionsCheck from '../components/questions-check.vue'
import questionsPro from '../components/questions-preview.vue'
export default {
  components: {
    QuestionsCheck,
    questionsPro
  },
  data () {
    return {
      visible: false,
      isShowDialog: false,
      selectionList: {
        user: '',
        region: '',
        subject: '',
        value: '',
        menu: '',
        tags: '',
        province: '',
        city: '',
        questionType: '', //
        direction: '', // 方向
        difficulty: '',
        creatorID: '',
        remarks: '',
        keyword: '',
        shortName: '',
        id: ''
      },
      formData: {
        page: 1,
        pagesize: 2,
        chkState: null,
        keyword: null,
        subjectID: null
      },
      activeName: 'first',
      total: 10,
      tableData: [],
      simpleList: [],
      simpleMenu: [],
      tagsMenu: [],
      simpleId: '',
      menuId: '',
      provinces,
      provincesList: [],
      CitysList: [],
      questionType,
      difficulty,
      direction,
      userCreatorID: [],
      subjectID: '',
      checkData: {},
      list: {}

    }
  },
  created () {
    this.getQuestionsList()
    this.getSimpleList()
    this.getProvinceList()
    this.getCreatorID()
  },
  computed: {
    getDirection () {
      return this.direction.map((item, index) => {
        return { label: item, value: index }
      })
    }
  },
  methods: {
    // 时间处理
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 搜索
    onSubmit () {
      this.formData.keyword = this.selectionList.keyword
      this.getQuestionsList(this.formData)
    },
    // 清空
    clearForm () {
      console.log('Clear')
      for (const key in this.selectionList) {
        if (key !== 'page' && key !== 'pagesize') this.selectionList[key] = null
      }
      this.formData.subjectID = null
    },
    async handlePreview (id) {
      console.log(id)
      this.isShowDialog = true
      const { data } = await detail({ id })
      this.list = data
      console.log(data)
    },
    handleClick2 (row) {
      console.log(row)
    },
    // 审核功能
    handleOpenDialog (row) {
      this.checkData = row
      console.log(this.checkData)
      this.visible = true
    },
    // 获取录入人列表
    async getCreatorID () {
      const { data } = await userList()
      // console.log(res)
      this.userCreatorID = data
      console.log(this.userCreatorID)
    },
    // 获取学科列表
    async getSimpleList () {
      const { data } = await simple()
      this.simpleList = data
    },
    changeMenuValue (value) {
      this.simpleId = value
      this.formData.subjectID = value
      this.GetMenuList()
      this.menuId = value
      this.getTagsList()
    },
    changeCityValue (city) {
      console.log(city)
      const result = citys(city)
      this.CitysList = this.handleOptionData(result)
    },
    // 整合下拉列表
    handleOptionData (val) {
      const arr = []
      const result = val.map((item, index) => {
        arr.push({})
        arr[index].value = item
        arr[index].label = item
        return arr
      })[0]
      return result
    },
    // 获取省份列表
    getProvinceList () {
      const result = this.provinces()
      this.provincesList = this.handleOptionData(result)
    },
    // 获取目录列表
    async GetMenuList () {
      const { data } = await simpleMenu({ subjectID: +this.simpleId })
      this.simpleMenu = data
      console.log(this.simpleMenu)
    },
    // 获取标签列表
    async getTagsList () {
      const { data } = await simpleTags({ subjectID: +this.menuId })
      this.tagsMenu = data
      console.log(this.tagsMenu)
    },
    // 获取精选列表
    async getQuestionsList () {
      const { data } = await choice(this.formData)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 获取不同状态下的列表
    // async getNewQuestionsList () {
    //   const { data } = await choice({ page: 1, pagesize: this.formData.pagesize, chkState: this.formData.chkState })
    //   // console.log(data)
    //   this.tableData = data.items
    //   this.total = data.counts
    // },
    // 获取列表不同状态
    getState (tab) {
      console.log(tab.label)
      if (tab.label === '待审核') {
        this.formData.chkState = 1
        this.getQuestionsList(this.formData)
      } else if (tab.label === '已审核') {
        this.formData.chkState = 2
        this.getQuestionsList(this.formData)
      } else if (tab.label === '未通过') {
        this.formData.chkState = 3
        this.getQuestionsList(this.formData)
      } else {
        this.formData.chkState = null
        this.getQuestionsList(this.formData)
      }
    },
    GetQuestionType ({ questionType: QuestionType }) {
      const obj = questionType.find(item => item.value === +QuestionType)
      return obj ? obj.label : '未知'
    },
    GetDifficulty ({ difficulty: Difficulty }) {
      const obj = difficulty.find(item => item.value === +Difficulty)
      return obj ? obj.label : '未知'
    },
    GetChkState ({ chkState }) {
      const obj = chkType.find(item => item.value === chkState)
      return obj ? obj.label : '未知'
    },
    GetPublishState ({ publishState }) {
      const obj = publishType.find(item => item.value === publishState)
      return obj ? obj.label : '未知'
    },
    handleSizeChange (val) {
      this.formData.pagesize = val
      this.formData.page = 1
      this.getQuestionsList()
    },
    handleCurrentChange (val) {
      this.formData.page = val
      this.getQuestionsList()
    },
    // 删除题目
    delList (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await questionDel(id)
        if (this.tableData.length === 1 && this.formData.page > 1) {
          this.formData.page--
        }
        this.getQuestionsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 精选题库上下架
    handleOpen (row) {
      console.log(row)
      this.$confirm(`您确认${row.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        type: 'warning'
      }).then(async () => {
        await choicePublish({ id: row.id, publishState: row.publishState })
        this.$message.success(`${row.publishState === 0 ? '下架' : '上架'}成功`)
        this.getQuestionsList()
      })
    }

  }
}
</script>

<style scoped lang='less'>
  .app-container{
    .top{
      display: flex;
      justify-content:space-between;
    }
    }

</style>
